<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { updateconsumer } from '@/api/consumer'

// 定义事件
const emit = defineEmits(['updateSuccess']) // ✅ 向父组件通知更新成功

// 控制抽屉显示
const drawer = ref(false)

// 表单宽度
const formLabelWidth = '120px'

// 表单数据
const form = ref({
  id: null,
  username: '',
  password: '',
  phone_num: '',
  email: '',
  location: '',
  create_time: null,
  update_time: null,
  birth: null
})

// 接收外部传入数据
const props = defineProps({
  consumerData: {
    type: Object,
    default: () => ({})
  }
})

// 打开抽屉的方法（父组件调用）
const openDrawer = (row) => {
  console.log('【UpdateConsumer】openDrawer 被调用，接收数据:', row)
  if (row) {
    form.value = { ...row }
  } else {
    form.value = {
      id: null,
      username: '',
      password: '',
      phone_num: '',
      email: '',
      location: '',
      create_time: null,
      update_time: null,
      birth: null
    }
  }
  drawer.value = true
}

// 监听 props 变化（调试备用）
watch(() => props.consumerData, (newVal) => {
  if (Object.keys(newVal).length > 0) {
    form.value = { ...newVal }
    console.log('【UpdateConsumer】consumerData 变化，表单更新')
  }
}, { deep: true, immediate: true })

// 提交编辑
const onSubmit = async () => {
  try {
    const res = await updateconsumer(form.value)
    ElMessage.success(res.msg || '更新成功')
    drawer.value = false
    emit('updateSuccess') // ✅ 通知父组件刷新表格
  } catch (err) {
    ElMessage.error('更新失败')
    console.error(err)
  }
}

// 暴露方法
defineExpose({ openDrawer })
</script>

<template>
  <el-drawer v-model="drawer" title="更新用户" direction="rtl" size="40%">
    <div class="demo-drawer__content">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNum" autocomplete="off" />
        </el-form-item>
        <el-form-item label="电子邮件" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="住址" :label-width="formLabelWidth">
          <el-input v-model="form.location" autocomplete="off" />
        </el-form-item>
        <el-form-item label="创建时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.create_time"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="上次登录时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.update_time"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-date-picker
            v-model="form.birth"
            type="date"
            placeholder="选择日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<style scoped>
.demo-drawer__content {
  padding: 20px;
}
</style>
